<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统演示 - AI内容可靠性检测</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center mb-5">系统演示</h1>
        
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5>知识库管理</h5>
                    </div>
                    <div class="card-body">
                        <form id="knowledgeForm">
                            <div class="mb-3">
                                <label for="title" class="form-label">标题</label>
                                <input type="text" class="form-control" id="title" required>
                            </div>
                            
                            <div class="mb-3">
                                <label for="kbContent" class="form-label">内容</label>
                                <textarea class="form-control" id="kbContent" rows="4" required></textarea>
                            </div>
                            
                            <div class="mb-3">
                                <label for="source" class="form-label">来源</label>
                                <input type="url" class="form-control" id="source" required>
                            </div>
                            
                            <div class="mb-3">
                                <label for="sourceType" class="form-label">类型</label>
                                <select class="form-control" id="sourceType">
                                    <option value="academic">学术论文</option>
                                    <option value="government">政府文件</option>
                                    <option value="news">新闻文章</option>
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label for="reliability" class="form-label">可靠性评分 (0-1)</label>
                                <input type="number" class="form-control" id="reliability" 
                                       min="0" max="1" step="0.1" value="0.8">
                            </div>
                            
                            <button type="submit" class="btn btn-success">添加到知识库</button>
                        </form>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5>信息验证</h5>
                    </div>
                    <div class="card-body">
                        <form id="verifyForm">
                            <div class="mb-3">
                                <label for="claim" class="form-label">待验证声明</label>
                                <textarea class="form-control" id="claim" rows="3" 
                                    placeholder="请输入要验证的声明..."></textarea>
                            </div>
                            
                            <button type="submit" class="btn btn-info">验证信息</button>
                        </form>
                        
                        <div id="verifyResult" class="mt-3" style="display: none;">
                            <h6>验证结果</h6>
                            <div id="verifyContent" class="border p-3 bg-light rounded"></div>
                        </div>
                    </div>
                </div>
                
                <div class="card mt-3">
                    <div class="card-header">
                        <h5>知识库统计</h5>
                    </div>
                    <div class="card-body">
                        <button id="getStats" class="btn btn-secondary">获取统计信息</button>
                        <div id="statsResult" class="mt-3" style="display: none;">
                            <div id="statsContent" class="border p-3 bg-light rounded"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 知识库表单处理
        document.getElementById('knowledgeForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const data = {
                title: document.getElementById('title').value,
                content: document.getElementById('kbContent').value,
                source: document.getElementById('source').value,
                source_type: document.getElementById('sourceType').value,
                reliability_score: parseFloat(document.getElementById('reliability').value)
            };
            
            try {
                const response = await fetch('/api/knowledge/add', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(data)
                });
                
                const result = await response.json();
                
                if (response.ok && result.success) {
                    alert('成功添加到知识库！');
                    this.reset();
                } else {
                    alert('添加失败: ' + (result.error || result.message));
                }
            } catch (error) {
                alert('请求失败: ' + error.message);
            }
        });
        
        // 验证表单处理
        document.getElementById('verifyForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const claim = document.getElementById('claim').value;
            
            if (!claim.trim()) {
                alert('请输入要验证的声明');
                return;
            }
            
            try {
                const response = await fetch('/api/verify', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ claim: claim })
                });
                
                const result = await response.json();
                
                if (response.ok) {
                    document.getElementById('verifyResult').style.display = 'block';
                    document.getElementById('verifyContent').textContent = JSON.stringify(result, null, 2);
                } else {
                    alert('验证失败: ' + result.error);
                }
            } catch (error) {
                alert('请求失败: ' + error.message);
            }
        });
        
        // 统计信息处理
        document.getElementById('getStats').addEventListener('click', async function() {
            try {
                const response = await fetch('/api/knowledge/stats');
                const result = await response.json();
                
                if (response.ok) {
                    document.getElementById('statsResult').style.display = 'block';
                    document.getElementById('statsContent').textContent = JSON.stringify(result, null, 2);
                } else {
                    alert('获取统计信息失败: ' + result.error);
                }
            } catch (error) {
                alert('请求失败: ' + error.message);
            }
        });
    </script>
</body>
</html>